<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>购物车</title>
		<link href="img/shouye/small_logo.png" rel="shortcut icon" />
		<link rel="stylesheet" type="text/css" href="css/h_goodsclassfycss/base.css" />
		<link rel="stylesheet" type="text/css" href="lib/weui.css" />
		<link rel="stylesheet" type="text/css" href="css/jquery-weui.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/h_goodsclassfycss/h_index_css.css" />
		<link rel="stylesheet" type="text/css" href="css/h_goodsclassfycss/h_myGwc.css" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			/*--------页面头部--------*/
			
			.h_fenlei {
				position: relative;
				left: 8px;
				font-size: 14px;
			}
			
			#myGwc_main {
				max-width: 640px;
				min-width: 360px;
				margin: 0px auto;
				padding-top: 50px;
				padding-bottom: 50px;
			}
			/*--------Mid--------*/
			
			#myGwc_mid {
				width: 100%;
				background-color: #FFFFFF;
			}
			
			.myGwc_mid_title {
				font-family: "微软雅黑";
				width: 100%;
				height: 40px;
				line-height: 40px;
				padding-left: 10px;
				border-bottom: 1px solid #DEDEDE;
			}
			
			.myGoodsList {
				height: 100px;
				border-bottom: 1px solid #DEDEDE;
				padding: 10px;
			}
			
			.myGoodsListLeft {
				width: 70px;
				margin-right: 2%;
				float: left;
				/*border: 1px solid;*/
			}
			
			.myGoodsListMid {
				width: 45%;
				height: 100%;
				float: left;
			}
			
			.myGoodsListRight {
				width: 110px;
				height: 100%;
				float: right;
				text-align: center;
				position: relative;
				right: -10px;
				/*border: 1px solid;*/
			}
			
			.myGoodsListLeft img {
				width: 100%;
				height: 100%;
				border: 1px solid;
			}
			
			.delList {
				color: #0099FF;
				position: relative;
				right: -25px;
			}
			
			.myGoodsListRight ul {
				margin-top: 13px;
			}
			
			.myGoodsListRight ul li {
				float: left;
				height: 30px;
				padding: 0px 5px;
				border: 1px solid #C7C7C7;
			}
			
			.myGoodsListRight ul li a {
				color: #666666;
			}
			
			.inputNum {
				width: 40px;
				height: 28px;
				text-align: center;
				border: 0;
				font-size: 18px;
				font-weight: bold;
				margin-top: -2px;
				background-color: transparent;
			}
			
			.myGoodsListName {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			
			.myGoodsListStyle {
				color: #999999;
				font-size: 15px;
			}
			
			.myGoodsListPrice {
				color: #EA2F17;
				font-weight: bold;
			}
			/*--------页面底部--------*/
			
			.h_GwcFoot {
				max-width: 640px;
				min-width: 360px;
				width: 100%;
				margin: 0px auto;
				position: fixed;
				bottom: 0px;
			}
			
			.h_GwcFoot div {
				float: left;
				height: 50px;
				width: 50%;
				text-align: center;
			}
			
			.h_GwcFootLeft {
				background-color: #FFFFFF;
				border-top: 1px solid #DEDEDE;
			}
			
			.h_GwcFootRight {
				background-color: #E62F17;
			}
			
			#priceZongJi {
				color: #E92F17;
				font-weight: bold;
			}
			
			.btn_jiesuan {
				display: block;
				font-family: "微软雅黑";
				line-height: 48px;
				height: 100%;
				color: #FFFFFF;
			}
			/*********null购物车***********/
			.h_GwcFoot {
				max-width: 640px;
				min-width: 360px;
				width: 100%;
				margin: 0px auto;
				position: fixed;
				bottom: 0px;
			}
			
			.h_GwcFoot div {
				float: left;
				height: 50px;
				width: 50%;
				text-align: center;
			}
			
			.h_GwcFootLeft {
				background-color: #FFFFFF;
				border-top: 1px solid #DEDEDE;
			}
			
			.h_GwcFootRight {
				background-color: #E62F17;
			}
			
			#priceZongJi {
				color: #E92F17;
				font-weight: bold;
			}
			
			.btn_jiesuan {
				display: block;
				font-family: "微软雅黑";
				line-height: 48px;
				height: 100%;
				color: #FFFFFF;
			}
			
			.nullGwc {
				height: 160px;
				background-color: #FFFFFF;
				text-align: center;
			}
			
			.nullGwc i {
				color: #CCCCCC;
				font-size: 90px;
			}
			
			.nullGwc p {
				color: #666666;
				font-family: "微软雅黑";
			}
			
			.FFF {
				background-color: #FFFFFF;
			}
			
			#h_myGoods .weui_btn {
				width: 85%;
				height: 40px;
				line-height: 38px;
				margin-top: 25px;
				color: #E62F17;
				border-color: #E62F17;
			}
			/*#myGwc_mid{
				padding-bottom: 120px;
			}*/
			/*-------最底部导航栏-------*/
			
			.h_myFoot {
				max-width: 640px;
				min-width: 330px;
				width: 100%;
				margin: 0px auto;
				position: fixed;
				bottom: 0px;
				border-top: 1px solid #DEDEDE;
				height: 50px;
				background-color: #FFFFFF;
				z-index: 999;
			}
			
			.h_myFoot .weui-row .weui-col-33 {
				text-align: center;
			}
			
			.h_myFoot .weui-row .weui-col-33 a {
				color: #666666;
				display: block;
			}
			
			.h_myFoot .weui-row .weui-col-33 a i {
				font-size: 23px;
			}
			
			.h_myFoot .weui-row .weui-col-33 a p {
				font-family: "微软雅黑";
				font-size: 14px;
				position: relative;
				top: -8px;
			}
			
			.my_tubiaoCol {
				color: #E62F17;
			}
		</style>

	</head>

	<body ontouchstart>
		<div id="myGwc_main">
			<header id="h_header">
				<a href="index.html" class="h_fenlei">再逛逛</a>
				<span><a>购物车</a></span>
				<div class="h_header_bottom"></div>
			</header>
			<div id="myGwc_mid">
				<!--<div id="myGwc_mid_title" class="myGwc_mid_title">卡布自营店</div>-->
				<div id="h_myGoods">
					<!----------商品list添加自本地存储---------->
				</div>
			</div>
			<footer class="h_GwcFoot">
				<div class="h_GwcFootLeft">
					合计&nbsp;：&nbsp;&nbsp;<span id="priceZongJi"></span><br />
					<span class="f14 col8">(不含运费和优惠)</span>
				</div>
				<div class="h_GwcFootRight">
					<a href="javascript:;" class="btn_jiesuan" onclick="location.href='dingDanSub.html'">结算</a>
				</div>
			</footer>
			<footer class="h_myFoot">
				<div class="weui-row">
					<div class="weui-col-33">
						<a href="index.html">
							<div>
								<i class="iconfont">&#xe625;</i>
							</div>
							<p>首页</p>
						</a> 
					</div>
					<div class="weui-col-33">
						<a href="GoodsClassify.html">
							<div>
								<i class="iconfont">&#xe681;</i>
							</div>
							<p>分类</p>
						</a>
					</div>
					<div class="weui-col-33">
						<a href="javascript:;">
							<div>
								<i class="iconfont">&#xe60d;</i>
							</div>
							<p>我的</p>
						</a>
					</div>
				</div>

			</footer>
		</div>

		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/goodsCaiXiangList.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				var strList = localStorage.getItem('goodslist');
				var arr = JSON.parse(strList);
				var priceAll = 0;

				//console.log(arr.length);
				if(!strList||arr.length == 0) {
					$("#myGwc_mid_title").css("display", "none");
					var div = $('<div class="nullGwc"></div>');
					var btn = $('<a href="index.html" class="weui_btn weui_btn_plain_primary">去逛逛</a>');
					$("#h_myGoods").append(div, btn);
					var i = $('<i class="iconfont">&#xe6b9;</i>');
					var p = $('<p>购物车空空如也，先去逛逛吧</p>');
					$(div).append(i, p);
					$("body").addClass("FFF");
				} else {
					$("#myGwc_mid_title").css("display", "block");
					$(".h_myFoot").css("display", "none");
					$("body").removeClass("FFF");
				for(var i = 0; i < arr.length; i++) {
					var ul = $('<ul class="myGoodsList">');
					$("#h_myGoods").append(ul);
					var li1 = $('<li class="myGoodsListLeft">');
					var li2 = $('<li class="myGoodsListMid">');
					var li3 = $('<li class="myGoodsListRight">');
					$(ul).append(li1, li2, li3);
					//					console.log(arr[i].img);  //从本地存储中调取图片路径
					var img = $('<img src="' + arr[i].img + '" />');
					$(li1).append(img);
					var p1 = $('<p class="myGoodsListName">' + arr[i].name + '</p>');
					var p2 = $('<p class="myGoodsListStyle">' + arr[i].Style + '</p>');
					var p3 = $('<p class="myGoodsListPrice">' + arr[i].price + '</p>');
					$(li2).append(p1, p2, p3);
					var ulNum = $('<ul><ul>');
					var del = $('<span><a href="#" class="delList">删除</a></span>');
					del.bind("click", function() {
						var ulList = $(this).parent().parent();
						var thisspan = this.children[0];

						var delbtn = document.getElementsByClassName("delList");
						//console.log($(this).parent().prev().children(".myGoodsListStyle").html());
						//拿到每个要删除的goods的对应名称						
						$.confirm('真的要删除‘' + $(this).parent().prev().children().html() + '’吗？', function() {
							//点击确认后的回调函数
							//从DOM中删除样式
							//							ulList.remove();
							//从本地存储中删除数据
							if(localStorage.goodslist) {
								for(var j = 0; j < delbtn.length; j++) {
									//									console.log(delbtn[j]);
									if(delbtn[j] == thisspan) {
										arr.splice(j, 1);
									}
								}

							}
							localStorage.goodslist = JSON.stringify(arr);
							location.reload();
						}, function() {
							//点击取消后的回调函数
							$.toast("取消操作", "cancel");
						});
					});
					//每个物品的   数量控制
					$(li3).append(del, ulNum);
					var liBtn1 = $('<li class="f15 yjl cannotChoose"><a id="ajia_'+i+'" onclick="s_minusNum(this)" href="#" class="iconfont jianNum">&#xe6a1;</a></li>')
					var liNum = $('<li><input id="inID'+i+'" type="text" class="inputNum" value="' + arr[i].goodsNum + '" /></li>');
					var liBtn2 = $('<li class="f15 yjr"><a id="ajian_'+i+'"  onclick="s_addNum(this)" href="#" class="iconfont addNum">&#xe600;</a></li>');
					$(ulNum).append(liBtn1, liNum, liBtn2);

					$("#priceZongJi").html(function() {
						//计算合计价格
						//console.log(arr[i].price.slice(22, arr[i].price.indexOf("/") - 1));
						var strPrice = arr[i].price.slice(22, 25) * arr[i].goodsNum;
						priceAll += strPrice;
						return "¥" + priceAll;
					});
				}
				
				}//else

			});
			
				function s_minusNum(t){
					//console.log(t.getAttribute("id"));
					var index = t.getAttribute("id").split("_")[1];
					var inputTemp = document.getElementById("inID"+index);
					//console.log(inputTemp.getAttribute("value"));
					var numTemp = inputTemp.getAttribute("value");
					numTemp --;
					if(numTemp==0){
						numTemp=1;
						$.alert("亲~至少买一件吧！", "温馨提示：");
					}
					inputTemp.setAttribute("value",numTemp);
					
//					var arr = JSON.parse(localStorage.goodslist);
//					var goodsjson = {
//						img: arr.img,
//						name: arr.name,
//						Style: arr.Style,
//						goodsNum: numTemp,
//						price: arr.price,
//						num: 1,
//						maxNum:arr.maxNumTemp
//					};
//					var arrTemp = [goodsjson];
//					localStorage.goodslist = JSON.stringify(arrTemp);
					
					console.log(JSON.parse(localStorage.goodslist)[index].goodsNum);
				}
				
				function s_addNum(t){
					var strList = localStorage.getItem('goodslist');
					var arr = JSON.parse(strList);
					//console.log(t.getAttribute("id"));
					var index = t.getAttribute("id").split("_")[1];
					var inputTemp = document.getElementById("inID"+index);
					//console.log(inputTemp.getAttribute("value"));
					var numTemp = inputTemp.getAttribute("value");
					numTemp ++;
					if(numTemp>=arr[index].maxNum){//这里应该存储一个  根据上一页存到本地的一个最大数量  来限制这里
						numTemp=arr[index].maxNum;
						$.alert("亲~就剩这么多了！", "温馨提示：");
					}
					inputTemp.setAttribute("value",numTemp);
					JSON.parse(localStorage.goodslist)[index].goodsNum= numTemp;
					console.log(JSON.parse(localStorage.goodslist)[index].goodsNum);
				}
				
			
		</script>
	</body>

</html>